import CommonDrawer from '@/components/CommonDrawer';
import request from '@/utils/request';
import { useAsyncEffect, useRequest } from 'ahooks';
import { Tabs } from 'antd';
import BaseInfo from './BaseInfo';
import StationInfo from './StationInfo';
import TrackInfo from './TrackInfo';
import styles from './index.less';

const Detail = (props) => {
  const { open, record, onCancel } = props;

  const { data: detailData, runAsync: runAsyncDetail } = useRequest(
    async (params) => {
      const res = await request({
        url: '/datas/line/detail',
        method: 'GET',
        params,
      });
      return res;
    },
    { manual: true },
  );

  useAsyncEffect(async () => {
    if (open && record?.lineId) {
      await runAsyncDetail({
        lineId: record.lineId,
      });
    }
  }, [open, record]);

  const items = [
    {
      key: '1',
      label: '线路信息',
      children: <BaseInfo data={detailData} />,
    },
    {
      key: '2',
      label: '站点信息',
      children: (
        <StationInfo lineId={record?.lineId} value={detailData?.stations} />
      ),
    },
    {
      key: '3',
      label: '轨迹信息',
      children: (
        <TrackInfo lineId={record?.lineId} value={detailData?.heavyTrackers} />
      ),
    },
  ];

  return (
    <CommonDrawer
      title="线路详情"
      open={open}
      onClose={onCancel}
      width={1400}
      footer={null}
      destroyOnHidden
      styles={{
        body: {
          paddingTop: 0,
        },
      }}
    >
      <div className={styles.detail}>
        <Tabs items={items} className="fit-tabs" />
      </div>
    </CommonDrawer>
  );
};

export default Detail;
